﻿<!DOCTYPE html>
<html>
<head>
  <title>ol-ext: Iframe API</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="Use OlIframeAPI to control a map in an iframe" />
  <meta name="keywords" content="Openlayers, ol, iframe, API" />

  <link rel="stylesheet" href="../style.css" />

  <!-- API -->
  <script type="text/javascript" src="../../dist/extra/MapIFrameAPI.js"></script>

  <style>
    #map {
      width: 600px;
      height: 400px;
      border: 0;
    }
  </style>

</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Openlayers iFrame API</h1>
  </a>
  <div class="info">
    The ol.ext.IFrameAPI lets you embed an ol map on your website and control the map using JavaScript.
    <br/>
    You don't need to include Openlayers js or css in your m ain page, just add the js API...
    <br/>
    This lets you embed maps created in an other site into yours.
  </div>

  <!-- Map div -->
  <iframe id="map" src="./map.iframe.html"></iframe>
  <div id="map2"></div>

  <div class="options">
    <a href="https://codepen.io/viglino/pen/KKMPwxo">See example on CodePen</a>
  </div>


  <script type="text/javascript">


// Get API
var olMap;
MapIFrameAPI.ready('map', function(api) {
  olMap = api;
  // Center map
  olMap.fn.setCenter([2,45]);
  olMap.fn.setZoom(10);
  // Get on move
  olMap.addIFrameListener('move', function(data) { 
    console.log('move', data.center, data.zoom); 
  })
  // Get selection
  olMap.addIFrameListener('select', function(data) { 
    console.log('Select:', data.selected[0]); 
  })
  // Get selection
  olMap.addIFrameListener('drawPolygon', function(data) { 
    console.log('Draw:', data); 
  })
});


  </script>

</body>
</html>